<!--患者列表-->
<template>
	<div>
		<el-tabs v-model="filter" @tab-click="handleClick" v-show="showTab">
			<el-tab-pane
					type="card"
					v-for="item in editableTabs"
					:key="item.name"
					:label="item.title+'['+item.total+']'"
					:name="item.filter"
			>
				<span slot="label" >
					<span class="big-ruit">{{item.total}}</span>
					<span class="font">{{item.title}}</span>
				</span>
			</el-tab-pane>
		</el-tabs>
		<div class="button-div" v-if="allowAdd">
			<el-button type="primary" icon="el-icon-plus" @click="newpatient">新建患者病例</el-button>
		</div>
		<div style="clear:both;"></div>
		<wt-paged-table url="/uaa/api/users/role-info-list" :initial-page="page" resultParam="content" countParam="totalElements" :page-size="5" size-param="pageSize" page-param="pageIndex" :extra-params="extraParams" @page-loaded="onPageLoaded" :filter="filter" :fetch="getAllUsers">
		<!-- <wt-paged-table url="patients/get_patients" :initial-page="page" :total-size="currentTotal" :page-size="pageSize" :extra-params="extraParams" @page-loaded="onPageLoaded" :filter="filter"> -->
			<el-table
					:data="pageData"
					stripe
					style="width: 100%"
					@row-dblclick="patientdetail"
			>
				<el-table-column
						min-width="70">
					<template scope="scope">
						<el-button @click="patientdetail(scope.row)" size="small">查看</el-button>
					</template>
				</el-table-column>
					<el-table-column
						prop="name"
						min-width="70"
						label="患者">
				</el-table-column>
				<el-table-column
						prop="sex"
						min-width="60"
						align="center"
						:formatter="showsix"
						label="性别">
				</el-table-column>
				<el-table-column
						prop="nation"
						min-width="60"
						align="center"
						:formatter="showsix"
						label="民族">
				</el-table-column>
				 <!-- <el-table-column
	                prop="diagnose"
	                label="性别"
					min-width="160"
	                >
	                <template scope="scope">
					    <div :title="scope.row.diagnose">
	                	 	{{scope.row.partDiagnose}}
	                	</div>
	                </template>
	       		</el-table-column> -->
				
				<el-table-column
						prop="birthday"
						min-width="100"
						align="center"
						:formatter="dateFormatdate"
						label="出生日期">
				</el-table-column>
				<el-table-column
						prop="clinicNumber"
						label="病案号"
						min-width="100">
				</el-table-column>
				<el-table-column
						prop="phone"
						label="最新联系方式"
						min-width="122">
				</el-table-column>
				<!-- <el-table-column
						prop="properties.lastHospitalizeDate"
						:formatter="dateFormat"
						label="最近入院时间"
						min-width="122">
				</el-table-column>
				<el-table-column
						prop="properties.lastHospitalizeAge"
						width="130"
						label="最近入院年龄">
				</el-table-column>
				<el-table-column
						prop="properties.caseCount"
						label="住院次数"
						width="100"
						align="center">
				</el-table-column> -->
		</el-table>
		</wt-paged-table>
		<check-patient-exist :visible.sync="visible" @on-ensure="ensure"></check-patient-exist>
	</div>
</template>
<script>
import Vue from "vue";
import WtPagedTable from "winged/components/wt-paged-table";
import times from "winged/utils/wt-time-utils";
import gender from "winged/utils/wt-form-utils";
import Permission from "winged/utils/wt-permission";
import checkPatientExist from "../../componentsWithData/check-patient-exist";
import { getAllUsers } from "../../utils/actions";
export default {
	name: "wt-patients-list",
	components: {
		[WtPagedTable.name]: WtPagedTable,
		[checkPatientExist.name]: checkPatientExist
	},
	props: {
		page: {
			type: Number,
			default: 0
		},

		showTab: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			getAllUsers,
			// 当前页的列表数据
			pageData: [],
			// 当前的filter
			filter: null,
			currentTotal: 80,
			pageSize: 10,
			// 用于请求查询的额外参数数据，通常是_token
			extraParams: {
				tagName: null,
				tagRegex: null
			},
			editableTabs: [
				{
					title: "所有患者",
					filter: null,
					total: 5
				},
				{
					title: "男性患者",
					filter: "male",
					total: 5
				},
				{
					title: "女性患者",
					filter: "female ",
					total: 5
				},
				{
					title: "老人60+",
					filter: "65plus",
					total: 5
				},
				{
					title: "儿童12-",
					filter: "blow12",
					total: 5
				}
			],
			allowAdd: Permission.checkPermission("patient-case-add"),
			visible: false
		};
	},
	methods: {
		ensure(isExit, patientId) {
			//跳转页面
			let path = isExit
				? `/case/create/${patientId}` //如果该patientId已经存在，则直接跳转到病例创建页面
				: `/patient/create/${patientId}`; //如果不存在，则跳转到患者创建页面，然后再跳转病例创建页面
			this.$router.push({ path });
		},
		onPageLoaded: function(data) {
			console.log("data", this.formateList(data));
			this.pageData = this.formateList(data);
		},
		formateList(data) {
			return data
				.map(item => {
					if (item.patientInfo) {
						item.patientInfo.id = item.id;
						return item.patientInfo;
					}
				})
				.filter(item => !!item);
		},
		/*
			 *给pageData添加diagnose和partDiagnose两个字段,partDiagnose为部分诊断结果，用于ui显示，避免过长			 
			 * */
		// builder(data) {
		// 	data.forEach((item, index) => {
		// 		var len = 30; //期望显示的诊断名字符长度
		// 		var diagnose_names = item.properties.diagnose_names;
		// 		var diagnose_names_joined = diagnose_names.reduce((a, b) => {
		// 			if (!b) return;
		// 			if (!/\[/.test(b)) {
		// 				return a + b + ";";
		// 			}
		// 			var nov = JSON.parse(b);
		// 			return (
		// 				a +
		// 				nov
		// 					.reduce((c, d, index) => {
		// 						if (index == nov.length - 1) return c + d;
		// 						return c + d.trim() + " / ";
		// 					}, "")
		// 					.trim() +
		// 				" ; "
		// 			);
		// 		}, "");

		// 		//完整诊断名
		// 		data[index].diagnose = diagnose_names_joined;
		// 		if (diagnose_names_joined.length <= len) {
		// 			//长度小于len,则显示全部
		// 			var partDiagnose = diagnose_names_joined;
		// 		} else {
		// 			//长度大于len，并且截取后的字符串末尾诊断名不完整，则去掉不完整部分，并加上省略号
		// 			var partDiagnose = diagnose_names_joined
		// 				.substr(0, len - 1)
		// 				.match(/[^\/,^;]*[\;,\/]/g)
		// 				.join("");
		// 			if (
		// 				diagnose_names_joined.replace(/\s;\s?/, "") !=
		// 				partDiagnose
		// 			) {
		// 				partDiagnose += "...";
		// 			}
		// 		}
		// 		partDiagnose = partDiagnose.replace(/[;/]...$/, "...");
		// 		//部分诊断名
		// 		data[index].partDiagnose = partDiagnose;
		// 	});
		// 	return data;
		// },
		handleClick(tab, event) {
			for (var i = 0; i < this.editableTabs.length; i++) {
				if (this.filter == 0 || this.filter == null) {
					this.currentTotal = this.filters["depart"];
					break;
				} else {
					if (this.editableTabs[i].filter == this.filter) {
						this.currentTotal = this.editableTabs[i].total;
						break;
					}
				}
			}
		},
		dateFormat: function(row, column) {
			var arr = column.property.split(".");
			var date = row[arr[0]][arr[1]];
			if (date == "") {
				return "";
			}
			return times.format(date, "date");
		},
		dateFormatdate: function(row, column) {
			var date = row[column.property];
			return times.format(date, "date");
		},
		showsix: function(row, column) {
			var six = row[column.property];
			return gender.formatGender(six);
		},
		patientdetail: function(row) {
			let path = `/patient/case-list/${row.id}`;
			this.$router.push({ path });
		},
		newpatient: function() {
			this.visible = true;
			console.log(this.visible);
		},
		casedetail: function(row, index) {
			window.location.href = `/admin/patients/${row.patientId}/detail`;
		}
	}
};
</script>
<style >
.button-div {
	padding-bottom: 0.5rem;
	float: right;
}
.big-ruit {
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 50%;
	border: solid #20a0ff 5px;
	float: left;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 1rem !important;
}
@media screen and (min-width: 1366px) {
	.big-ruit {
		width: 2.8rem;
		height: 2.8rem;
		border-radius: 50%;
		border: solid #20a0ff 5px;
		float: left;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-size: 1rem !important;
	}
	.el-tabs__item {
		margin-bottom: 0.7rem !important;
	}
}
@media screen and (max-width: 1366px) {
	.el-tabs__item {
		margin-bottom: 1.2rem !important;
	}
}
.font {
	margin-left: 8px !important;
	height: 50px;
	line-height: 50px;
}

.el-tabs__header {
	margin-bottom: 0.5rem;
}
</style>